<template>
  <div class="hello">
    <bk-button :theme="'default'"
               type="submit"
               :title="'基础按钮'"
               @click="handleClick"
               class="mr10">基础按钮</bk-button>
    <bk-button :theme="'primary'"
               :title="'主要按钮'"
               class="mr10"
               disabled>主要按钮</bk-button>
    <bk-button type="primary"
               v-if="curProcess <= dataList.length"
               @click="next"
               style="margin-top: 20px; margin-bottom: 20px;">{{curProcess === dataList.length ? '完成' : '下一步' }}</bk-button>
    <bk-button type="primary"
               @click="reset"
               style="margin-top: 20px; margin-bottom: 20px;"
               v-else>重置</bk-button>
    <bk-process :list="dataList"
                :cur-process.sync="curProcess"
                :display-key="'content'"
                :show-steps="true"
                :controllable="true"
                @process-changed="changeProcess"></bk-process>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      curProcess: 1,
      dataList: [{
        content: '创建应用',
        steps: [{
          content: '创建应用1',
          isLoading: true
        }, {
          content: '创建应用2',
          isLoading: true
        }]
      }, {
        content: '完善资料',
        steps: [{
          content: '完善资料1',
          isLoading: true
        }, {
          content: '完善资料2',
          isLoading: true
        }]
      }, {
        content: '下载代码',
        steps: [{
          content: '下载代码1',
          isLoading: false
        }, {
          content: '下载代码2',
          isLoading: true
        }, {
          content: '下载代码3',
          isLoading: false
        }, {
          content: '下载代码4',
          isLoading: true
        }]
      }, {
        content: '测试部署',
        steps: [{
          content: '测试部署1',
          isLoading: true
        }, {
          content: '测试部署2',
          isLoading: false
        }]
      }, {
        content: '开发完成',
        steps: [{
          content: '开发完成1',
          isLoading: true
        }, {
          content: '开发完成2',
          isLoading: false
        }]
      }]
    }
  },
  methods: {
    changeProcess (process, data) {
      console.log(process)
      console.log(data)
    },
    next () {
      this.curProcess++
    },
    reset () {
      this.curProcess = 1
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
